<script lang="ts" setup>
import PopCertificateForm from './PopCertificateForm.vue'
import { getSafeInfo } from '@/utils/system'
import type { QualificationOptionType } from '@/api/userInfo'
import { getUploadQualificationList, deleteQualification } from '@/api/userInfo'
import type{ QualificationListItemType } from '@/api/userInfo'
import { useToast, useMessage  } from 'wot-design-uni'

defineOptions({ name: 'PopCertificateList' })
const toast = useToast()
const message = useMessage()
const qualificationOption = ref<QualificationOptionType | null>()
const show = ref(false)
const certificate_form = ref(null)
const qualification_list = ref<Array<QualificationListItemType>>([])
const popTitle = computed(() => {
  return qualificationOption?.value?.qualificationName ?? '证书列表'
})
const showAddBtn = computed(() => {
  const count = qualificationOption?.value?.maxFileCount ?? 0
  if(count > 0){
    const len = renderList.value.length
    return len < count
  }
  return false
})
const _getUploadQualificationList = async() => { 
  const res = await getUploadQualificationList()
  qualification_list.value = res
}
const renderList = computed(() => {
  if(qualificationOption.value){
    const res = qualification_list.value.find(ele=>ele.qualificationType === qualificationOption.value.qualificationType) 
    return res?.qualificationFileRespVoList ?? []
  }else{
    return []
  }
})
const open = async (option: QualificationOptionType) => {
  qualificationOption.value = option
  await _getUploadQualificationList()
  show.value = true
}

const handleClose = () => {
  show.value = false
}
const showAddForm = () => {
  certificate_form.value.open(qualificationOption.value)
}
const handleDelete = async ({id}) => {
  message
    .confirm({
      msg: '确认删除该文件？',
      title: '提示',
      confirmButtonProps: {
        type: 'error'
      }
    })
    .then(async() => {
      const res = await deleteQualification({id})
      if(res.code === 0){
        toast.success('删除成功')
        await _getUploadQualificationList()
      }
    })
}

onShow(async () => {
})
defineExpose({
  open,
})
</script>

<template>
  <JediPagePop
    v-model="show"
    :title="popTitle"
    custom-class="bgGray"
    @close="handleClose"
  >
    <view class="qualificationListWrap h-full pt-3">
      <template v-if="renderList.length">
        <wd-card v-for="item in renderList" :key="item.id" :title="item.qualificationName">
          <view class="flex w-full aspect-square shrink-0">
            <JediImg width="100%" height="100%" class="w-full h-full border border-solid border-gray-100 rounded-sm" enable-preview :src="item.qualificationPath" mode="aspectFit" /> 
          </view>
          <template #footer>
            <wd-button size="small" type="error" @click="handleDelete(item)">删除</wd-button>
          </template>
        </wd-card>
      </template>
      <JediEmpty v-else image="content" tip="暂无证书" />
    </view>
    <template v-if="showAddBtn" #footer>
      <wd-button block size="large" @click="showAddForm">
        添加证书
      </wd-button>
    </template>
  </JediPagePop>
  <PopCertificateForm ref="certificate_form" @refresh="_getUploadQualificationList"/>
</template>

<style lang="scss" scoped>
  .qualificationListWrap{
    overflow-y: auto;
    box-sizing: border-box;
  }
</style>